<template>
  <div class="container">
    <lineChart :chartData="lineData" />
  </div>
</template>

<script>
import lineChart from '@/components/echarts/lineChart.vue'
export default {
  components: { lineChart },
  data() {
    return {
      lineData: {
        xAxis: ['4月', '5月', '6月', '7月', '8月'],
        legend: {
          data: ['expected', 'actual']
        },
        series: [{
          name: 'expected',
          label: {
            show: true,
            textStyle: { color: '#fff' },//拐点文字样式
            formatter: (params) => {
              return params.value + '%'
            },
          },
          itemStyle: {
            normal: {
              color: '#FFD15C',
              lineStyle: {
                color: '#FFD15C',
                width: 2
              }
            }
          },
          smooth: false,
          type: 'line',
          data: [0, 5, 3, 5, 9],
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 12.3vh;
  background: linear-gradient(180deg, rgba(2, 68, 102, 0.3) 0%, rgba(2, 60, 89, 0.3) 0%, rgba(1, 18, 27, 0.3) 100%);
  border: 2px solid rgba(31, 198, 255, 0.15);
}
</style>